<template>
    <div id="background">
        <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#12ada9"
        text-color="#fff"
        active-text-color="#ffd04b">
            <el-menu-item index="1" @click="open1">首页</el-menu-item>
            <el-menu-item index="2" @click="open2">借阅书籍</el-menu-item>
            <el-menu-item index="3" @click="open3">借阅记录</el-menu-item>
            <el-menu-item index="4" @click="open4">个人中心</el-menu-item>
        </el-menu> 
        <div class="out">
            <el-button @click="out">登出</el-button>
        </div>
        <transition name="el-fade-in-linear">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
import 'element-ui/lib/theme-chalk/base.css';
export default {
    data() {
      return {
        activeIndex: '1',
        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      };
    },
    methods: {
        handleSelect(key, keyPath) {
        console.log(key, keyPath);
        },
        out(){
            localStorage.clear()
            this.$message.success("登出成功")
            this.$router.push("/")
        },
        open1(){
            if(this.$router.currentRoute.fullPath != "/index"){
                this.$router.push("/index")
            }else{
                return
            }
        },
        open2(){
            if(this.$router.currentRoute.fullPath != "/index/borrow"){
                this.$router.push("/index/borrow")
            }else{
                return
            }
        },
        open3(){
            if(this.$router.currentRoute.fullPath != "/index/list"){
                this.$router.push("/index/list")
            }else{
                return
            }
        },
        open4(){
            if(this.$router.currentRoute.fullPath != "/index/person"){
                this.$router.push("/index/person")
            }else{
                return
            }
        },
    },
    mounted () {
        
    }
}
</script>

<style scoped>  
    .out{
        position: fixed;
        top: 1.5%;
        right: 2%;
    }

    #person{
        color: aquamarine;
        position: fixed;
        top: 20%;
        right: 5%;
    }

    .router-link-active{
        text-decoration: none;
    }

    #background{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0%;
        left: 0%;
        background-image: url("../../assets/image/book.png");
        background-size: cover;
        opacity: 0.9;
    }

</style>